<template>
    <div class="p-20 p-t-0 box-shadow-1">
        <div class="table-search" >
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-select v-model="typeSearch" style="width:100%" placeholder="请选择折扣类别" size="medium">
                        <el-option
                                v-for="item in packageType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="input" @keyup.enter.native="keyDown($event)" placeholder="请输入折扣名称" :maxlength="20" size="medium"></el-input>
                </el-col>
                <el-col :span="8" class="text-left">
                    <el-button  class="btn-info"  icon="el-icon-search" @click="search" size="medium">搜索</el-button>
                    <el-button  class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch" size="medium">重置</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table-padding">
            <div class="title-buttons">
                <el-button v-hasPermission="'management_discountPlan:create'" class="title-button btn-primary" @click="addShow=true;activityId=''" icon="el-icon-plus" size="medium">新建&nbsp;</el-button>
              <el-button v-hasPermission="'management_discountPlan:allocationBranch'" class="title-button btn-primary"  size="medium" @click="addStores()" icon="el-icon-plus">批量分配机构&nbsp;</el-button>
            </div>
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 :border="true"
                 style="width: 100%"   @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
                <el-table-column
                   type="index"
                   width="50">
                 </el-table-column>
                <el-table-column
                        label="折扣类型">
                    <template scope="scope">
                        <span v-if="scope.row.type">{{scope.row.type.text}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="折扣名称">
                    <template scope="scope">
                       <span v-if="scope.row.branchs">
                        <el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.name}}</el-button>
                        </span>
                      <span v-else>{{scope.row.name}}</span>
                        <!--<span>{{scope.row.name}}</span>-->
                    </template>
                </el-table-column>
              <el-table-column
                label="适用场景">
                <template scope="scope">
                  <span v-if="scope.row.useScene">{{scope.row.useScene.text}}</span>
                </template>
              </el-table-column>
                <el-table-column
                        label="开始时间">
                    <template scope="scope">
                        <span>{{scope.row.startTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结束时间">
                    <template scope="scope">
                        <span>{{scope.row.endTime}}</span>
                    </template>
                </el-table-column>
              <el-table-column
                label="折扣率">
                <template scope="scope">
                  <span v-if="scope.row.type &&scope.row.type.key !='PLAN'">{{scope.row.discount}}</span>
                  <span v-else>----</span>
                </template>
              </el-table-column>
                <el-table-column
                        label="会员折">
                    <template scope="scope">
                        <span v-if="scope.row.hasVip">是</span>
                      <span v-if="!scope.row.hasVip">否</span>
                    </template>
                </el-table-column>

                 <!--<el-table-column-->
                         <!--label="查看" width="70">-->
                     <!--<template scope="scope">-->
                         <!--<router-link :to="'/discountPlans/show?id='+scope.row.id">-->
                             <!--<span class="icon icon-chakanmingxi table-icon"></span>-->
                         <!--</router-link>-->
                     <!--</template>-->
                 <!--</el-table-column>-->
              <el-table-column
                label="操作" width="200">
                <template scope="scope" >
                  <!--<el-button type="text" size="small" style="margin: 0px;" @click=""  >启用</el-button>-->
                  <el-button v-hasPermission="'management_discountPlan:allocationBranch'" type="text" size="small" style="margin: 0px;" @click="addStore=true;activityId=scope.row.id;" >分配机构 | </el-button>
                  <el-button v-hasPermission="'management_discountPlan:update'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >修改 | </el-button>
                  <el-button v-hasPermission="'management_discountPlan:destory'" style="margin: 0px;" @click="handleDelete(scope.$index,scope.row)"
                             type="text" size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="pageSizeSet"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" v-on:close="addClose" v-on:addSuccess="addSuccess"></model>
      <setStore :isShow="addStore" :reason="multipleSelection"  :id="activityId"  @close="addClose1" @addSuccess="addSuccess1"></setStore>
      <storeNum :isShow="isStoreNum" :id="activityId" @close="addClose2"></storeNum>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    import setStore from './setStore.vue'
    import storeNum from './storeNum.vue'

    export default{
        data(){
            return {
                tableData: [],
                loading:false,
                pageSizeSet:window.pageSizes,
                pageSize:window.pageSize,
                currentPage:1,
                input:"",
                inputValue:"",
                total:0,
                addShow:false,
                activityId:"",
                typeSearch:"",
                packageType:[{label: "全单折扣", value: "AllSINGLE"}, {label: "方案折扣", value: "PLAN"}],

                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
              multipleSelection:[],
              addStore:false,
              isStoreNum:false,


            }
        },
        components: {
            model,
          setStore,
          storeNum
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
          addStores(){
            if(this.multipleSelection.length<=0){
              this.$message.error("请选择折扣后操作");
              return;
            }
            this.addStore=true;this.activityId=''
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
          },
            initData(){
                // this.loading=true;
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.typeSearch="";
                this.inputValue="";
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue="";
                if(this.input!="" && this.input!=undefined){
                    this.inputValue="search.name_like="+this.input+"&"+this.inputValue;
                }
                if(this.typeSearch!="" && this.typeSearch!=undefined){
                    this.inputValue="search.type_eq="+this.typeSearch+"&"+this.inputValue;
                }
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                this.$axios.get("pays/discountPlans?"+this.inputValue+"&page.size="+this.pageSize+"&page.pn="+this.currentPage).then((data)=>{
                    if(data.status==200){
                        this.tableData=data.content.content;
                        this.total=data.content.totalElements;
                        this.loading=false
                    }else{
                        this.loading=false
                    }
                })
            },
            /*用户选择提示框后处理*/
            dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("pays/discountPlans/"+this.curDataRow.id).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            handleDelete(index, row) {
              console.log(index);
              console.log(row);
                this.curDataIndex = index;
                this.curDataRow = row;
                this.dialogIsShow = true;
                return false;
            },
         /* handleDelete(index,delIndex,id) {
            this.selectItmeIndex=index,
              this.selectItemDetailsIndex=delIndex;
            this.selectDelId=id;
            this.dialogIsShow=true;
          },*/
            addSuccess(item){
               this.addShow=false;
               this.currentPage=1;
               this.initData();
            },
            addClose(){
                this.addShow=false;
            },
          addSuccess1(item){
            this.addStore=false;
            this.currentPage=1;
            this.initData();
          },
          addClose1(){
            this.addStore=false;
          },
          addClose2(){
            this.isStoreNum=false;
          },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },

        }
    }
</script>
<style scoped>
</style>
